<template>
  <div class="center_news_item" :style="isHome || $store.getters.screenWidth ? 'width:100%' : ''"  @click="todetail(itemobj.id)">
    <img style="width:40%;" :style="$store.getters.screenWidth ? 'width:40%;height:90px;' : 'height:120px' " :src="itemobj.image" alt object-fit="fill" />
    <div style="width:70%;padding-left:10px;text-align:left;" class="newsitem">
      <span>
        <h4 style="font-size:18px;font-weight:400">{{itemobj.title}}</h4>
        <p
          style="margin-top:3px:font-size:17px;word-break:break-all;color:5e7387;font-weight:300;line-height:1.8;"
        >{{itemobj.synopsis.length > 80 ? itemobj.synopsis.slice(0,80)+'...' : itemobj.synopsis}}</p>
      </span>

      <span>
        <p style="color:#aaa;margin-top:3px">{{itemobj.addTime.slice(0,10)}}</p>
      </span>
    </div>
  </div>
</template>
<script>
// import moment from 'moment'
export default {
  name: "newsItem",
  data() {
    return {
      isshow: false
    };
  },
  filters: {
    tiemform(val) {
      return val;
    }
  },
  props: {
    itemobj: Object,
    isHome:{
      type:Boolean,
      default:false
    }
  },
  methods:{
      todetail(id) {
      this.$router.push({
        path: "/newsDetail",
        query: { id: id }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.center_news_item {
  width: 46%;
  display: flex;
  padding: 15px;
  box-sizing: border-box;
    //   border-bottom: 1px solid #eee;
  
  .newsitem {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>